<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>广材网 - 会员日</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="./css/jquery.fullPage.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="fullpage">
        <div id="fullpage">
            <div class="section">
                <div class="page p1">
                    <div class="p_text p1_text"></div>
                    <div class="p1_letter tada" id="letter"></div>
                </div>
            </div>
            <div class="section">
                <div class="page p2">
                    <div class="p2_t"></div>
                    <div class="p2_in"></div>
                    <div class="p2_link">
                        <a href=""></a>
                    </div>
                </div>
            </div>
            <div class="section">
                <div class="page p3">
                    <div class="p_text p3_text"></div>
                    <div class="p3_hand"></div>
                </div>
            </div>
            <div class="section">
                <div class="page p4">
                    <div class="p_text p4_text"></div>
                </div>
            </div>
            <div class="section">
                <div class="page p5">
                    <div class="p_text p5_text"></div>
                    <div class="p5_clock">
                        <div class="p5_clock_h"></div>
                        <div class="p5_clock_m"></div>
                    </div>
                </div>
            </div>
            <div class="section">
                <div class="page p6">
                    <div class="p_text p6_text"></div>
                    <!-- <div class="p6_jz"></div> -->
                </div>
            </div>
            <div class="section">
                <div class="page p7">
                    <div class="p_text p7_text"></div>
                </div>
            </div>
            <div class="section">
                <div class="page p8">
                    <div class="p_text p8_text"></div>
                    <div class="p8_seagull p8_seagull1">
                        <span class="p8_seagull_left fly1"></span>
                        <span class="p8_seagull_center"></span>
                        <span class="p8_seagull_right fly2"></span>
                    </div>
                    <div class="p8_seagull p8_seagull2">
                        <span class="p8_seagull_left fly1"></span>
                        <span class="p8_seagull_center"></span>
                        <span class="p8_seagull_right fly2"></span>
                    </div>
                    <div class="p8_seagull p8_seagull3">
                        <span class="p8_seagull_left fly1"></span>
                        <span class="p8_seagull_center"></span>
                        <span class="p8_seagull_right fly2"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src='./js/jquery.js'></script>
    <script src='./js/jquery.fullPage.js'></script>
    <script>
        $(document).ready(function() {
            $('#fullpage').fullpage({
                //设置background-color属性
                sectionsColor: ['#6a3e2e', '#080f29', '#28170c', '#ae8e49', '#151823', '#1f283e', '#3e3521', '#376da9'],
                //每一页的内容是否垂直居中
                verticalCentered: true,
                //滚动速度,默认为700  单位ms
                scrollingSpeed: 600,
                //字体是否随着页面缩放而缩放，默认值为false
                resize: true,
                afterLoad: function(anchorLink, index) {
                    if (index == "1") {
                        // $(".p1").find(".p1_letter").addClass("letterZoom");
                    } else if (index == "2") {
                        $(".p2").find(".p2_t").addClass("lines");
                        $(".p2").find(".p2_in").addClass("delayIn1");
                        $(".p2").find(".p2_link").addClass("delayIn2");
                    } else if (index == "3") {
                        $(".p3").find(".p3_hand").addClass("handZoom");
                    } else if (index == "5") {
                        $(".p5").find(".p5_clock").addClass("zoom");
                    } else if (index == "8") {
                        $(".p8").find(".p8_seagull1").addClass("flyZoom1");
                        $(".p8").find(".p8_seagull2").addClass("flyZoom2");
                        $(".p8").find(".p8_seagull3").addClass("flyZoom3");
                    }
                    $(".p" + index).find(".p_text").addClass("fadeInLeft");
                },
                onLeave: function(anchorLink, index) {
                    if (index == "1") {
                        $(".p1").find(".p1_letter").removeClass("letterZoom");
                    } else if (index == "2") {
                        $(".p2").find(".p2_t").removeClass("lines");
                        $(".p2").find(".p2_in").removeClass("delayIn1");
                        $(".p2").find(".p2_link").removeClass("delayIn2");
                    } else if (index == "3") {
                        $(".p3").find(".p3_hand").removeClass("handZoom");
                    } else if (index == "5") {
                        $(".p5").find(".p5_clock").removeClass("zoom");
                    } else if (index == "8") {
                        $(".p8").find(".p8_seagull1").removeClass("flyZoom1");
                        $(".p8").find(".p8_seagull2").removeClass("flyZoom2");
                        $(".p8").find(".p8_seagull3").removeClass("flyZoom3");
                    }
                    $(".p" + index).find(".p_text").removeClass("fadeInLeft");
                }
            });
            $("#letter").click(function() {
                $(".p1").find(".p1_letter").removeClass("tada").addClass("letterZoom");
                setTimeout(function() {
                    $.fn.fullpage.silentMoveTo('2');
                }, 2500)
            });
            // $.fn.fullpage.silentMoveTo('1');
        });


        (function(doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function() {
                    var clientWidth = docEl.clientWidth;
                    var clientHeight = docEl.clientHeight;
                    if (!clientWidth) return;
                    if (clientHeight <= 500) {
                        $(".p5_clock").css("top", "11rem")
                    }
                    docEl.style.fontSize = 10 * (clientWidth / 375) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</body>

</html>